<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>choose</title>
</head>
<body>
	<div>
		<p>爱好</p>
		<input type="checkbox" value = "choose" id = "all">全选<br>
		<div class = "items">
			<input type="checkbox" value = "read">阅读<br>
			<input type="checkbox" value = "swim">游泳<br>
			<input type="checkbox" value = "program">编程<br>
			<input type="checkbox" value = "smoke">抽烟<br>
			<input type="checkbox" value = "game">游戏<br>
			<input type="checkbox" value = "drink">喝酒<br>
		</div>
		
		<button>全选</button>
		<button>全不选</button>
		<button>反选</button>
	</div>
	<script src="jquery-3.3.1.min.js"></script>
	<script>
		// var btns = document.querySelectorAll("button");
		var inps=$('input');
		var btn1 = $('button')[0];
		var btn2 = $('button')[1];
		var btn3 = $('button')[2];
		$(btn1).click(function(){
			for (var i = 1; i < inps.length; i++) {
				$(inps[i]).prop('checked',true);
			}
		})
		$(btn2).click(function(){
			for (var i = 1; i < inps.length; i++) {
				$(inps[i]).prop('checked',false);
			}
		})
		$(btn3).click(function(){
			for (var i = 1; i < inps.length; i++) {
				$(inps[i]).prop('checked',!($(inps[i]).prop('checked')));//反选，pro获取checked属性，
			}
		})
		// var items = document.querySelector(".items");
		// var inps = items.children;
		// btn1.onclick = function() {
		// 	for(var i = 0; i<inps.length; i++) {
		// 		inps[i].checked = true;
		// 	}
		// }
		// btn2.onclick = function() {
		// 	for(var i = 0; i<inps.length; i++) {
		// 		inps[i].checked = false;
		// 	}
		// }
		// btn3.onclick = function() {
		// 	for(var i = 0; i<inps.length; i++) {
		// 		inps[i].checked = !(inps[i].checked);
		// 	}
		// }
		// all = document.querySelector("#all");
		// all.onclick = function() {
		// 	for(var i = 0; i<inps.length; i++) {
		// 		inps[i].checked = all.checked;
		// 	}
		// }





		
	</script>
</body>
</html>